<template>
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>
    <!-- loader END -->
    <div class="wrapper">
        <div class="container">
            <div class="row no-gutters height-self-center">
                <div class="col-sm-12 text-center align-self-center">
                    <div class="iq-error position-relative">
                        <img src="../static/picture/Datum_404.png" class="img-fluid iq-error-img iq-error-img-dark mx-auto" alt="">
                        <h2 class="mb-0">没有找到页面</h2>
                        <p>无响应</p>
                        <a class="btn btn-primary d-inline-flex align-items-center mt-3" href="/user/login"><i class="ri-home-4-line mr-2"></i>回到登录页面</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
    		/* 定义关键帧动画，用于文字的闪烁效果 */
		@keyframes blink {
			0% {
				opacity: 1;
			}
			50% {
				opacity: 0.5;
			}
			100% {
				opacity: 1;
			}
		}

		/* 美化 h2 标签 */
		.iq-error h2 {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			font-size: 3rem;
			color: #FF6347;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
			margin-bottom: 1rem;
			animation: blink 2s infinite;
		}

		/* 美化 p 标签 */
		.iq-error p {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			font-size: 1.5rem;
			color: #666;
			margin-bottom: 2rem;
		}

		/* 美化按钮 */
		.iq-error a.btn {
			background-color: #007BFF;
			border: none;
			border-radius: 50px;
			padding: 12px 25px;
			font-size: 1.2rem;
			font-weight: 600;
			color: #fff;
			text-decoration: none;
			transition: all 0.3s ease;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		}

		/* 按钮悬停效果 */
		.iq-error a.btn:hover {
			background-color: #0056b3;
			transform: translateY(-3px);
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		}

		/* 图标样式 */
		.iq-error a.btn i {
			font-size: 1.5rem;
		}

		/* 让 .iq-error 成为 Flex 容器并设置子元素居中 */
		.iq-error {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 100vh; /* 确保容器至少占满视口高度 */
		}
</style>